:C:\Users\农麒新\Desktop\蓝桥\delivery\frontend\src\Pages\user\WelcomePage.vue
<template>
    <div class="welcome-page" @wheel="handleWheel">
        <!-- 背景轮播图 -->
        <el-carousel :interval="5000" arrow="always" height="100vh" class="carousel-background">
            <el-carousel-item v-for="item in images " :key="item">
                <div class="carousel-item" :style="{ backgroundImage: `url(${item})` }"></div>
            </el-carousel-item>
        </el-carousel>

        <!-- 固定的文字内容 -->
        <div class="fixed-content">

            <div class="content">
                <h1 class="gradient-text">欢迎来到豹饱巴士</h1>
                <p class="gradient-text">这里是为您服务的外卖平台</p>
                <el-button
                    :type="user.id ? 'danger' : 'success'"
                    @click="logout"
                    size="large"
                    round
                    style="font-weight: 600;"
                >
                    {{ user.id ? '退出登录' : '用户登录' }}
                </el-button>
                <el-button @click="toJie" type="primary" size="large" round style="font-weight: 600;">切换非用户端</el-button>
            </div>
            <div class="scroll-down">
                <span class="gradient-text">向下滑动</span>
                <i class="el-icon-arrow-down"></i>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { defineEmits } from 'vue';
import axios from "axios";
import router from "../../router.js";

const emit = defineEmits(['scroll-down']);

const images = [
    '/25xt-484802-FoodiesFoodorderingdeliveryIOSappUIkitz2.jpg',
    '/1703361938321631.png',
    '/BHFDFEHIHBCJG-kGSjVzIPQ4.png',
    '/OIP-C.webp',
];

const currentIndex = ref(0);

const handleWheel = (event) => {
    if (event.deltaY > 0) {
        emit('scroll-down');
    }
};
const user=ref({
    id:'',
    yhm:'',
    pwd:'',
    yhtx:'',
    sjh:'',
    age:'',
    sex:''
});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    user.value=data;
}
//--------------------------页面自动刷新-----------------------
onMounted(()=>{
    acquireUsers();
})

const logout=() => {
    router.push('/login')
}
const toJie=() => {
    router.push('/multilogin')
}
onMounted(() => {
    const carousel = document.querySelector('.el-carousel');
    carousel.addEventListener('slide', (e) => {
        currentIndex.value = e.detail.index;
    });
});
</script>

<style scoped>
.welcome-page {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.carousel-background {
    width: 100%;
    height: 100%;
}

.carousel-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fixed-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.content {
    text-align: center;
    z-index: 2;
    background-color: rgba(225, 255, 11, 0.7);
    padding: 30px;
    border-radius: 10px;
}

.gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #dda0dd);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 3s ease infinite;
    font-weight: bold;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.content h1 {
    font-size: 48px;
    margin: 0;
}

.content p {
    font-size: 24px;
    margin-top: 20px;
}

.scroll-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bounce 2s infinite;
    background-color: rgba(25, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
    z-index: 2;
}

.scroll-down span {
    font-size: 16px;
    color: #999;
    margin-bottom: 10px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}
</style>
